<template>
  <div>
    <div class="main">
      <eagle-input
        name="calendar"
        v-model="form.ChnName"
        label="姓名"
        placeholder="请选择"
        @click-input="goMannerItem"
        readonly
        required
      >
        <template #button>
          <van-icon
            name="cross"
            @click="clearUserName"
          />
        </template>
      </eagle-input>
      <eagle-datepicker-local
        :labelName="'选择年份'"
        :formatName="'YYYY'"
        @CallBack="datepickerformat"
        :timeName="form.Year"
      ></eagle-datepicker-local>
      <eagle-file-upload
        @CallBack="_fileUploadCb"
        :attachs="form.MainAttach"
        :labelName="'签名文件'"
        :mustInput="true"
        labelWidth="100"
      ></eagle-file-upload>

      <div class="btn_submit">
        <eagle-button
          block
          type="info"
          @click="submit"
        > 提交 </eagle-button>
      </div>
    </div>
    <user-choose-dialog
      :show.sync="userChooseDialogShow1"
      :selectedValue="form.UserName"
      :IsAccounted="true"
      :isMulti="false"
      @callback="_chooseMannerItem"
      ref="userChoose"
    >
    </user-choose-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import UserChooseDialog from "@/views/components/user/userChooseDialog.vue";
export default {
  components: {
    UserChooseDialog,
  },
  data() {
    return {
      id: this.$route.query.id,
      userChooseDialogShow1: false,
      form: { Details: [] },
    };
  },

  computed: {
    ...mapGetters(["baseUrl", "CompanyCode", "roles"]),
  },

  created() {
    if (this.$route.query.id != null) {
      this.id = this.$route.query.id
    }
    if (this.id == 0) {
      var d = new Date();
      this.form.Year = d.getFullYear().toString();
    }else{
      this.getDetail();
    }
  },
  methods: {
    _fileUploadCb(attachs) {
      this.form.MainAttach = attachs;
    },
    datepickerformat(time) {
      if (time.getFullYear()) {
        this.form.Year = time.getFullYear().toString();
      }
    },
    getDetail() {
      let params = { id: this.id };
      this.$axios
        .get("/ResponsibilityOrgPostUserDepositManage/GetDetail", {
          params: params,
        })
        .then((res) => {
          this.form = res.data;
        });
    },
    clearUserName() {
      this.form.ChnName = "";
      this.form.UserName = "";
      this.form.postname = "";
      this.form.OrgName = "";
      this.form.OrgCode = "";
    },
    goMannerItem() {
      this.userChooseDialogShow1 = true;
    },
    _chooseMannerItem(userlist) {
      (this.form.ChnName = userlist.name), (this.form.UserName = userlist.code);
      (this.form.PostName = userlist.PostName),
        (this.form.OrgName = userlist.OrgName),
        (this.form.OrgCode = userlist.OrgCode),
        (this.userChooseDialogShow1 = false);
    },
    submit() {
      if (!this.form.ChnName) {
        return this.$toast("请选择姓名");
      }

      if (!this.form.Year) {
        return this.$toast("请选择年份");
      }

      if (!this.form.MainAttach) {
        return this.$toast("请选择签名文件");
      } else {
        if (this.form.MainAttach.length == 0) {
          return this.$toast("请选择签名文件");
        }
      }
      if(!this.form.Details){
        this.form.Details=[];
      }
      this.form.Details.push({
        PostName: this.form.PostName,
        UserName: this.form.UserName,
        OrgName: this.form.OrgName,
        OrgCode: this.form.OrgCode,
        ChnName: this.form.ChnName,
      });
      this.$axios
        .post("/ResponsibilityOrgPostUserDepositManage/SaveData", this.form)
        .then((res) => {
          this.$toast.success("保存成功");
          setTimeout(() => {
            this.$router.goRefresh(-1);
          }, 300);
        });
    },
  },
};
</script>

<style lang="less" >
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
</style>
<style lang="less" scoped>
.space-between {
  justify-content: space-between;
}
</style>
